<template>
	<div>
		<el-card class="box-card">
			<div
				slot="header"
				class="clearfix"
			>
				<span>{{title}}</span>
			</div>
			<div
				id="macaronsChart"
				:style="{width: '600px', height: '300px'}"
			></div>
		</el-card>
	</div>
</template>
<script>
	import "../../node_modules/echarts/map/js/china.js";
	export default {
		name: "ComponentD",
		data() {
			return {
				title: "当前显示： 中国地图组件",
			};
		},
		mounted() {
			this.$nextTick(() => {
				this.initChart();
			});
		},
		methods: {
			//实现一
			initChart() {
				this.chart = this.$echarts.init(
					document.getElementById("macaronsChart"),
					"macarons"
				);
				this.chart.setOption({
					title: {
						text: "",
						x: "center",
					},
					tooltip: { trigger: "item" },
					dataRange: {
						min: 0,
						max: 10000000,
						x: "left",
						y: "bottom",
						color: ["lightskyblue", "pink"],
						text: ["高", "低"],
						calculable: true,
					},
					series: [
						{
							name: "人口",
							type: "map", //地图类型
							mapType: "china", //获取中国的地图
							itemStyle: {
								normal: { label: { show: true } }, //显示标签
								emphasis: {
									//选中或者悬浮状态
									label: { show: true },
								},
							},
							data: [
								{ name: "北京", value: Math.round(Math.random() * 10000000) },
								{ name: "天津", value: Math.round(Math.random() * 10000000) },
								{ name: "河北", value: Math.round(Math.random() * 10000000) },
								{ name: "山西", value: Math.round(Math.random() * 10000000) },
								{ name: "内蒙古", value: Math.round(Math.random() * 10000000) },
								{ name: "辽宁", value: Math.round(Math.random() * 10000000) },
								{ name: "吉林", value: Math.round(Math.random() * 10000000) },
								{ name: "黑龙江", value: Math.round(Math.random() * 10000000) },
								{ name: "上海", value: Math.round(Math.random() * 10000000) },
								{ name: "江苏", value: Math.round(Math.random() * 10000000) },
								{ name: "浙江", value: Math.round(Math.random() * 10000000) },
								{ name: "安徽", value: Math.round(Math.random() * 10000000) },
								{ name: "福建", value: Math.round(Math.random() * 10000000) },
								{ name: "江西", value: Math.round(Math.random() * 10000000) },
								{ name: "山东", value: Math.round(Math.random() * 10000000) },
								{ name: "河南", value: Math.round(Math.random() * 10000000) },
								{ name: "湖北", value: Math.round(Math.random() * 10000000) },
								{ name: "湖南", value: Math.round(Math.random() * 10000000) },
								{ name: "广东", value: Math.round(Math.random() * 10000000) },
								{ name: "广西", value: Math.round(Math.random() * 10000000) },
								{ name: "海南", value: Math.round(Math.random() * 10000000) },
								{ name: "重庆", value: Math.round(Math.random() * 10000000) },
								{ name: "四川", value: Math.round(Math.random() * 10000000) },
								{ name: "贵州", value: Math.round(Math.random() * 10000000) },
								{ name: "云南", value: Math.round(Math.random() * 10000000) },
								{ name: "西藏", value: Math.round(Math.random() * 10000000) },
								{ name: "陕西", value: Math.round(Math.random() * 10000000) },
								{ name: "甘肃", value: Math.round(Math.random() * 10000000) },
								{ name: "青海", value: Math.round(Math.random() * 10000000) },
								{ name: "宁夏", value: Math.round(Math.random() * 10000000) },
								{ name: "新疆", value: Math.round(Math.random() * 10000000) },
								{ name: "台湾", value: Math.round(Math.random() * 10000000) },
								{ name: "香港", value: Math.round(Math.random() * 10000000) },
								{ name: "澳门", value: Math.round(Math.random() * 10000000) },
							],
						},
					],
				});
			},
		},
	};
</script>
<style lang="css" scoped>
	div {
		color: #f56c6c;
	}
	/deep/ .el-tag {
		font-size: 18px;
	}
	/deep/ .el-card {
		font-size: 14px;
	}
</style>